App.Desktop = new Ext.Panel({
	region: 'center'
	,id: 'desktop'
	,border: false
	,bodyCssClass: 'body'
	,anchor: '100%, -0'
	,boxMinHeight: 500
	,boxMinWidth: 500
	,listeners: {
		render: function(panel){
			var store = new Ext.data.ArrayStore({
				proxy   : new Ext.data.MemoryProxy(),
				fields  : ['id', 'name', 'icon'],
				sortInfo: {
					field    : 'name',
					direction: 'ASC'
				}
			});
			
			panel.dataView = new Ext.DataView({
				id: 'desktop-view'
				,store: store
				,tpl  : new Ext.XTemplate(
					'<ul>',
						'<tpl for=".">',
							'<li id="desktop-icon-{id}" class="icon">',
								'<img src="images/icons/{icon}" />',
								'<strong>{name}</strong>',
							'</li>',
						'</tpl>',
					'</ul>'
				)
				,itemSelector: 'li.icon'
				,listeners: {
					dblclick: function(dataView, index, node, e){
						App.Module[dataView.getRecord(node).data.id].showWin(node);	
					}	
				}
			});
			this.store = store;
			panel.add(panel.dataView);
			
			// handler contextmenu
			panel.getEl().on('contextmenu', function(e, html, o){
				this.showContextMenu(e.getXY());
				e.stopEvent();
			}, this);
		}
	}
	,addIcon: function(data){
		this.store.add(new Ext.data.Record(data));
	}
	,getContextMenu: function(){
		if(this.contextmenu) return this.contextmenu;
		var desktop = this;
		this.contextmenu = new Ext.menu.Menu({
			items: [
				{
					text: 'Refresh'
					,handler: function(){
						desktop.doLayout();
					}	
				}
			]	
		});
		return this.contextmenu;
	}
	,showContextMenu: function(at){
		this.getContextMenu().showAt(at);
	}
});
App.Config.window.renderTo = App.Desktop.id;